<template>
	<div class="padding-container preview-wrap">
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.block.log.clientid">
        <el-input v-model="tableParams.cilentid"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.block.log.dataCode">
        <el-input v-model="tableParams.dataCode"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.block.log.imei">
        <el-input v-model="tableParams.imei"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.block.log.issueType">
        <el-select v-model="tableParams.issueType" :placeholder="$root.lang.control.block.log.select" clearable>
          <el-option
            v-for="item in baseState.issueType"
            :key="item.value"
            :label="item.title"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()">{{ $root.lang.control.block.log.query }}</el-button>
        <el-button size="small" @click="searchAction(true)">{{ $root.lang.control.block.log.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="logList"
      :empty-text="$root.lang.control.block.log.noData"
      size="small"
      border
      style="width: 100%"
      >
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.clientid">
        <template slot-scope="scope">
          <span>{{ scope.row.cilentid | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.dataCode">
        <template slot-scope="scope">
          <span>{{ scope.row.dataCode | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.imei">
        <template slot-scope="scope">
          <span>{{ scope.row.imei | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.issueType">
        <template slot-scope="scope">
          <span>{{ scope.row.issueType | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.message">
        <template slot-scope="scope">
          <span>{{ scope.row.message | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.block.log.issueTime">
        <template slot-scope="scope">
          <span>{{ scope.row.issueTime | dateFormat }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>
	</div>
</template>

<script>
import '@/options/baseState'
export default {
	name: 'SendLog',
  components: {
  },
  props: {
  },
  watch: {
  },
	data() {
		return {
			listLoading: false,
			tableParams: {
				pageNum: 1,
				pageSize: 10,
        imei: null,
        cilentid: null,
        dataCode: null,
        issueType: null
			},
      tableTotal: 0,
      logList: null,
      baseState: baseState
		}
	},
  methods: {
    sizeChange(val) {
      this.tableParams.pageNum = 1
      this.tableParams.pageSize = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.pageNum = val
      this.fetchData()
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          pageNum: 1,
          pageSize: 10,
          imei: null,
          cilentid: null,
          dataCode: null,
          issueType: null
        }
      } else {
        this.tableParams.pageNum = 1
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/blockchain/log/issued',
          method: 'post',
          data: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.logList = response.rows
          this.tableTotal = response.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          this.logList = []
      })
    },
  },
  created() {
    this.fetchData()
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size:16px;
			padding-bottom:30px;
		}
	}
</style>